<template>
  <c-row-view :title="data.node_name">
    <template #opn>
      <c-row-view-opn
        :auth="true"
        :visible.sync="visibles.edit"
        @cancel="cancel"
        @save="save"
      >
      </c-row-view-opn>
    </template>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="140px"
      :validate-on-rule-change="false"
    >
      <c-row :col="6">
        <c-col>
          <!-- 工单类型 -->
          <el-form-item :label="multLang('显示名称')" prop="show_name">
            <c-form-edit :visible="visibles.edit">
              <template #edit>
                <el-input v-model="form.show_name"></el-input>
              </template>
              <span>{{ form.show_name }}</span>
            </c-form-edit>
          </el-form-item>
        </c-col>
        <c-col>
          <!-- 适用对象 -->
          <el-form-item :label="multLang('适用对象', ':')" prop="relation_type">
            <span>{{ relationTypeMap[form.relation_type] }}</span>
          </el-form-item>
        </c-col>
        <c-col>
          <!-- 选择模版 -->
          <el-form-item
            :label="multLang('选择模版', ':')"
            prop="work_template_code"
          >
            <c-row margin>
              <c-col>
                <span>{{ workTemplateMap[form.work_template_code] }}</span>
              </c-col>
              <c-col>
                <el-button type="text" @click="getProcessLeafImg">
                  {{ multLang('查看流程图') }}
                </el-button>
              </c-col>
            </c-row>
          </el-form-item>
        </c-col>
        <c-col :col="11">
          <!-- 模版描述 -->
          <el-form-item :label="multLang('描述', ':')" prop="remark">
            <c-form-edit :visible="visibles.edit" long>
              <template #edit>
                <c-input-text v-model="form.remark"></c-input-text>
              </template>
              <span>{{ form.remark }}</span>
            </c-form-edit>
          </el-form-item>
        </c-col>
      </c-row>
    </el-form>
    <ProcessPicture
      :visible.sync="visibles.img"
      :img="picture"
    ></ProcessPicture>
  </c-row-view>
</template>
<script>
import { ObjectCopy } from '@/util'
import { editProcessLeafData } from '@/http/api/v1/wot'
import ProcessPicture from './ProcessPicture.vue'
import { getProcessLeafImg } from '@/http/api/v1/file'
export default {
  name: 'ProcessLeafView',
  components: { ProcessPicture },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      visibles: { edit: false, img: false },
      picture: '',
      form: {
        node_id: '',
        node_type: '',
        pref_id: '',
        node_name: '',
        show_name: '',
        relation_type: '',
        work_template_code: '',
        remark: ''
      }
    }
  },
  computed: {
    relationTypeMap() {
      return this.optionMap('relation_type')
    },
    workTemplateMap() {
      return this.optionMap('work_template')
    },
    rules() {
      return {
        show_name: {
          required: true,
          message: this.tplLang('text_choose_a', ['显示名称']),
          trigger: 'change'
        }
      }
    }
  },
  watch: {
    data() {
      this.setForm()
    }
  },
  beforeCreate() {},
  created() {
    this.setOption({ key: 'relation_type' })
    this.setOption({ key: 'work_template' })
  },
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    cancel() {
      this.setForm()
      this.visibles.edit = false
    },
    save() {
      this.$refs.form.validate(
        valid =>
          valid &&
          editProcessLeafData(this.form).then(() => {
            this.visibles.edit = false
            this.query()
          })
      )
    },
    setForm() {
      // IsEmptyObj(this.info)
      //   ? ObjectCopy(this.form, this.data)
      //   : ObjectCopy(this.form, this.info)
      ObjectCopy(this.form, this.data)
      this.$nextTick().then(() => this.$refs.form.clearValidate())
    },
    getProcessLeafImg() {
      const { node_id, flow_code } = this.data
      this.picture = getProcessLeafImg(node_id, flow_code)
      this.visibles.img = true
    }
  }
}
</script>
<style lang="scss"></style>
